<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>盒子模型</title>
    <style>
      .box1 {
        /*width和height设置内容区大小，并不是盒子的大小*/
        width: 200px;
        height: 200px;
        background-color: #bfa;

        /*边框 盒子边缘 属于盒子内部 边框的大小会影响到盒子大小*/
        /*设置边框，至少设置3个参数
            宽度 一般默认3px 一般是四个参数 顺时针 上右下左 一个参数表示全部都一样
                4 上 右 下 左
                3 上 左右 下
                2 上下 左右
                1 上下左右
            颜色 不设置 默认黑色 #bfa 绿豆沙
            形状/样式/风格
                solid 实线
                dotted 点
                dashed 虚线
                double 双线
            */
        border-width: 10px;
        border-style: dashed;
        border-color: orange red yellow green;
        /*简写 border: 5px solid red;*/

        /*border-top: 10px solid blue;只给一边设置*/
        /*border-right: none;*/

        /*padding内边距 边框和内容区之间的距离叫做内边距*/
        padding: 10px;
      }
    </style>
  </head>

  <body>
    <div class="box1">aa</div>
    <!--
    盒子模型
    组成：
    内容区content
    内边距:padding
    边框border
    外边距margin
-->
    <p>盒子模型 组成： 内容区content 内边距:padding 边框border 外边距margin</p>
    <div>
      <img src="../img/img.png" alt="盒子模型" />
    </div>
  </body>
</html>
